<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            width: 500px;
            height: 280px;
            background-color: #cccccc;
            margin: auto;
        }
        #h{
            height: 30px;
            font-size: 20pt;
            background-color: blue;
            color: white;
            text-align: center;
        }
        #b{
            padding-left: 30px;
            padding-top: 30px;
        }
        .c1{
            color: red;
        }
        .c2{
            background-color: #ff8800;
        }
    </style>
    <script>
        var valStatus={
            username:false,
            password:false,
            repassword:false,
            phone:false
        };

        function updateSubmitStatus(){
            var s=document.getElementById("s");
            var flag=true;
            for(fieldName in valStatus){
                if(valStatus[fieldName]==false){
                    flag=false;
                }
            }
            if(true==flag){
                s.disabled=false;
            }else{
                s.disabled=true;
            }

        }

        function valUsername(){
            var obj=document.getElementById("username");
            if(!obj.value.trim()){
                document.getElementById("usernameMessage").innerHTML="用户名不能为空";
                obj.className="c2";

                valStatus.username=false;
                updateSubmitStatus();

                return false;
            }

            valStatus.username=true;
            updateSubmitStatus();

            return true;
        }

        function valPassword(){
            var obj=document.getElementById("password");
            if(obj.value.length<2||obj.value.length>6){
                document.getElementById("passwordMessage").innerHTML="密码必须在2-6位之间";
                obj.className="c2";

                valStatus.password=false;
                updateSubmitStatus();

                return false;
            }

            valStatus.password=true;
            updateSubmitStatus();

            return true;

        }

        function valRepassword(){
            var obj=document.getElementById("repassword");
            if(obj.value.length<2||obj.value.length>6){
                document.getElementById("repasswordMessage").innerHTML="确认密码必须在2-6位之间";
                obj.className="c2";


                valStatus.repassword=false;
                updateSubmitStatus();

                return false;
            }
            if(obj.value!=document.getElementById("password").value){
                document.getElementById("repasswordMessage").innerHTML="确认密码不一致";
                obj.className="c2";

                valStatus.repassword=false;
                updateSubmitStatus();

                return false;
            }

            valStatus.repassword=true;
            updateSubmitStatus();

            return true;

        }

        function valPhone(){
            var obj=document.getElementById("phone");
            var reg=/^\d{3,4}-\d{8}$/;
            if(!reg.test(obj.value)){
                document.getElementById("phoneMessage").innerHTML="电话号码格式不正确";
                obj.className="c2";

                valStatus.phone=false;
                updateSubmitStatus();

                return false;
            }

            valStatus.phone=true;
            updateSubmitStatus();

            return true;

        }

        function foc(id){
            var obj=document.getElementById(id);
            var message=document.getElementById(id+"Message");
            message.innerHTML="";
            obj.className="";
        }

        //所有校验通过了return true，只要有一个校验不通过return false
        function valForm(){
            return valUsername()&&valPassword()&&valRepassword()&&valPhone();
        }

    </script>
</head>
<body>

    <!--
        数据格式校验
        用户名
            不能为空
        密码
            必须在2-6位之间
        确认密码
            必须在2-6位之间
            跟密码一致
        电话
            符合025-12345678

        输入完以后进行校验（离开焦点事件 onblur）
        如果校验失败
            在当前组件后显示错误消息
            字的颜色红色
            组件高亮显示
        用户改错（获得焦点事件 onfocus）
            所有错误效果取消
    -->
    <div id="d1">
        <div id="h">注册</div>
        <div id="b">
            <form action="js01.html" onsubmit="return valForm();">
                <table cellspacing="10">
                    <tr>
                        <td>用户名：</td>
                        <td>
                            <input type="text" name="username" id="username" onblur="valUsername();" onfocus="foc('username');"/>
                            <span id="usernameMessage" class="c1"></span>
                        </td>
                    </tr>
                    <tr>
                        <td>密码：</td>
                        <td>
                            <input type="password" name="password" id="password" onblur="valPassword();" onfocus="foc('password')"/>
                            <span id="passwordMessage" class="c1"></span>
                        </td>
                    </tr>
                    <tr>
                        <td>确认密码：</td>
                        <td>
                            <input type="password" name="repassword" id="repassword" onblur="valRepassword();" onfocus="foc('repassword')"/>
                            <span id="repasswordMessage" class="c1"></span>
                        </td>
                    </tr>
                    <tr>
                        <td>电话：</td>
                        <td>
                            <input type="text" name="phone" id="phone" onblur="valPhone();" onfocus="foc('phone')"/>
                            <span id="phoneMessage" class="c1"></span>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" style="padding-left: 100px;padding-top: 20px">
                            <input type="submit" value="注册" style="width: 200px;" disabled="disabled" id="s"/>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>

</body>
</html>


































